<template>
  <div class="presMoni">
    <div class="top_line">
      <div class="top_line_content">
        <el-select v-model="stateValue" placeholder="请选择" size="small" style="width:100px;margin-right:10px;" @change="stateChange">
          <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <div>
          <img style="width:35px;margin-right:10px;position: relative;bottom:1px;cursor: pointer;" @click="cardClick" :src="cardIsSelect==true?cardSelect:cardNoselect" />
          <!-- <img :src="cardSelect" /> -->
        </div>
        <div>
          <img style="width:35px;margin-right:10px;position: relative;bottom:1px;cursor: pointer;" @click="tableClick" :src="tableIsSelect==true?tableSelect:tableNoselect" />
          <!-- <img :src="cardSelect" /> -->
        </div>
      </div>
    </div>
    <div style="margin-top:45px;">
      <div v-show="cardIsSelect" style="display:flex;justify-content:space-between">
        <div v-for="(item,index) in pointListData" :key="index" class="card" @click="toRealtime(item.id)">
          <div class="card_top">
            <span>{{ item.name }}</span>
          </div>
          <div class="card_bot">
            <div>
              <div class="card_aline" v-for="(it,ind) in item.paramData" :key="ind">
                <div>{{ it.displayName == undefined?'':it.displayName }}:</div>
                <div class="line_rig">
                  <span style="font-size:18px;color:#0079FE;margin-right:10px;">{{ it.val }}</span>
                  <span>{{ it.unit == undefined?'':it.unit }}</span>
                </div>
              </div>
              <!-- <div class="card_aline" style="margin-top:5px;">
                <div>更新时间:</div>
                <div class="line_rig">{{ item.time == undefined?'':item.time }}</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div v-show="tableIsSelect">
        <el-table :data="pressureCheckList" border style="width: 100%">
          <el-table-column align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="monitorPointName" label="监测点名称">
          </el-table-column>
          <el-table-column align="center" prop="pipe_pressure" label="当前值(Mpa)">
          </el-table-column>
          <el-table-column align="center" prop="create_date" label="上传时间">
          </el-table-column>
          <el-table-column align="center" prop="qualified_num" label="合格次数">
          </el-table-column>
          <el-table-column align="center" prop="qualifiedRate" label="合格率(%)">
          </el-table-column>
          <el-table-column align="center" prop="avg_value" label="平均值(MPa)">
          </el-table-column>
          <el-table-column align="center" prop="min_value" label="最小值(MPa)">
          </el-table-column>
          <el-table-column align="center" prop="min_time" label="最小值时间">
          </el-table-column>
          <el-table-column align="center" prop="max_value" label="最大值(MPa)">
          </el-table-column>
          <el-table-column align="center" prop="max_time" label="最大值时间">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import cardNoselect from "./../../image/card_noselect.svg";
import cardSelect from "./../../image/card_select.svg";
import tableNoselect from "./../../image/table_noselect.svg";
import tableSelect from "./../../image/table_select.svg";
import {
  searchflMonitorPoint,// 查询监测点
  searchflPointReportData,//监测点上报数据查询
  searchflPressureCheckList,//查询管网压力监测表格
} from "@/api/schedule/base/flOverviewPipe/index";
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
import {
  getRealtimeReportData, //查询最新一条推送数据
} from "@/api/schedule/base/flSupplyPump/index";
import {
  searchAllFlClassify, //查询所有分类
} from "@/api/schedule/base/flClassify/index";
export default {
  components: {
    cardNoselect,
    cardSelect,
    tableNoselect,
    tableSelect
  },
  data () {
    return {
      cardIsSelect: true,
      tableIsSelect: false,
      cardNoselect: cardNoselect,
      cardSelect: cardSelect,
      tableNoselect: tableNoselect,
      tableSelect: tableSelect,
      options: [],
      stateValue: "0",
      tableData: [],
      pointListData: [],
      // reportListData: [],
      pressureCheckList: [],
      paramData: {}
    }
  },
  mounted () {
    this.handleMonitorPoint()
    this.handleAllFlClassify()
    this.handlePressureCheckList()
  },
  methods: {
    toRealtime (id) {
      this.$emit('toReal', id)
    },
    cardClick () {
      this.cardIsSelect = true
      this.tableIsSelect = false
    },
    tableClick () {
      this.cardIsSelect = false
      this.tableIsSelect = true
    },
    handleMonitorPoint () {
      let classify
      let reportDataList = []
      if (this.stateValue == '0') {
        classify = ''
      } else {
        classify = this.stateValue
      }
      let obj = {
        type: 3,
        classify: classify
      }
      searchflMonitorPoint(obj).then(response => {
        let pointList = response.data
        if (pointList.length != 0) {
          pointList.map(item => {
            let obj = {
              monitorPointId: item.id,
            }
            let reportValObj = {
              monitorPointId: item.id,
              type: 3
            }
            assflParam(obj).then(response => {
              let paramList = response.data
              getRealtimeReportData(reportValObj).then(res => {
                let firstObj = res.data[0]
                paramList.map(it => {
                  if (firstObj) {
                    if (Object.keys(firstObj).includes(it.enName)) {
                      it['val'] = firstObj[it.enName]
                    } else {
                      it['val'] = ''
                    }
                  } else {
                    it['val'] = ''
                  }
                })
                item['paramData'] = paramList
                reportDataList.push(item)
                this.pointListData = reportDataList
                // console.log(this.pointListData)
                // debugger
              }).catch( err => {
                paramList.map(it => {
                  it['val'] = ''
                })
                item['paramData'] = paramList
                reportDataList.push(item)
                this.pointListData = reportDataList
              })
            }).catch( err => {
              console.log(err)
              debugger
            });
          })
        } else {
          this.pointListData = reportDataList
        }
      }).catch(error => {
      });
    },
    handleAllFlClassify () {
      let obj = {
        type: 3
      }
      searchAllFlClassify(obj).then(response => {
        let allObj = {
          id: "0",
          name: "全部"
        }
        this.options = response.data
        this.options.unshift(allObj)
      })
    },
    // handleReport (pointListData) {
    //   let obj = {
    //     type: 3
    //   }
    //   searchflPointReportData(obj).then(response => {
    //     let rePortList = response.data
    //     pointListData.map(item => {
    //       if (rePortList != 0) {
    //         rePortList.map(it => {
    //           if (item.id == it.monitorPointId) {
    //             delete it.id
    //             delete it.name
    //             item = { ...item, ...it }
    //           } else {
    //             item = item
    //           }
    //         })
    //         this.reportListData.push(item)
    //       } else {
    //         this.reportListData.push(item)
    //       }
    //       console.log(this.reportListData)
    //       debugger;
    //     })
    //     // rePortList.map(item => {
    //     //    pointListData.map(i => {
    //     //      if( item.monitorPointId == i.id) {
    //     //         this.reportListData.push(item)
    //     //      }
    //     //    })
    //     // })
    //   }).catch(error => {
    //   });
    // },
    handlePressureCheckList () {
      let obj = {
        onlineState: this.stateValue
      }
      searchflPressureCheckList(obj).then(response => {
        this.pressureCheckList = response.data
        console.log(this.pressureCheckList)
      })
    },
    stateChange (e) {
      this.stateValue = e
      this.handleMonitorPoint()
    }
  }
}
</script>
<style scoped>
.presMoni {
  padding: 20px;
}
.top_line {
  text-align: right;
  position: relative;
}
.top_line_content {
  display: flex;
  position: absolute;
  right: 0;
}
.card {
  width: 220px;
  height: 100px;
  border-radius: 3px;
  border: 1px solid #0079fe;
}
.card_top {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  background: #0079fe;
  font-family: 微软雅黑;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  color: #fff;
}
.card_bot {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  /* color: #E6B4B5; */
}
.card_aline {
  display: flex;
  position: relative;
  width: 200px;
}
.line_rig {
  position: absolute;
  right: 0;
}
</style>